<template>
  <div class="order_detail_wrapper">
    <el-main v-loading="loading">
      <el-card class="mt10">
        <div class="clearfix">
          <span style="font-size: 16px;font-weight: bold">用户详情</span>
          <el-button style="float: right;" size="small" @click="$router.back()">返回</el-button>
        </div>
      </el-card>
      <el-card class="mt10">
        <el-descriptions
          title="详情"
          :column="3"
          border
          size="small"
          label-class-name="my-label"
          contentClassName="my-content">
          <el-descriptions-item label="uid">{{ detail.id }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ detail.mobile }}</el-descriptions-item>
          <el-descriptions-item label="用户昵称">{{ detail.name }}</el-descriptions-item>
          <el-descriptions-item label="所在省份">{{ detail.provinceName || '无' }}</el-descriptions-item>
          <el-descriptions-item label="所属标签组">{{ detail.tagName || '无' }}</el-descriptions-item>
          <el-descriptions-item label="所属黑名单">{{ detail.blackName || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="mt10">
        <el-descriptions
          v-for="(item, index) in detail.patList" :key="item.id"
          :column="3"
          border
          size="small"
          label-class-name="my-label"
          contentClassName="my-content">
          <div slot="title" :style="{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}">
            <div>{{`宠物${index + 1}`}}</div>
            <el-button type="primary" size="mini" @click="handleDeleteRecord(item)">删除</el-button>
          </div>
          <el-descriptions-item label="宠物名称">{{ item.petName }}</el-descriptions-item>
          <el-descriptions-item label="品种">{{ item.petBreeds }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ getAge(item.birthday) }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ item.petGender === 1 ? '弟弟' : '妹妹' }}</el-descriptions-item>
          <el-descriptions-item label="是否绝育">{{ item.sterilizeStatus ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="体重">{{ item.bodyWeight }}KG</el-descriptions-item>
          <el-descriptions-item label="体型">{{ bodyFigureMap[item.bodyFigure] }}</el-descriptions-item>
          <el-descriptions-item label="喜欢的运动">{{ generalSportsMap[item.generalSports] }}</el-descriptions-item>
          <el-descriptions-item label="运动量">{{ sportTimesMap[item.sportTimes] }}</el-descriptions-item>
          <el-descriptions-item label="过敏食材">{{ joinAllergiesFoods(item.allergiesFoodsList) || '--' }}</el-descriptions-item>
          <el-descriptions-item label="患病">{{ joinIllnessCase(item.illnessCaseList) }}</el-descriptions-item>
          <el-descriptions-item label="改善诉求">{{ item.improvement }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { queryUserByList } from '@/api/user/user';
import moment from "moment";

const BodyFigureMap = {
  1: "偏瘦",
  2: "正常",
  3: "偏胖",
};

export const GeneralSportsMap = {
  1: "走",
  2: "跑",
  3: "跳",
  4: "躺平",
};

const SportTimesMap = {
  1: "＜0.5h/天",
  2: "0.5-1h/天",
  3: "1-2h/天",
  4: "2-3h/天",
  5: "＞3h/天",
};

export default {
  data() {
    return {
      bodyFigureMap: BodyFigureMap,
      generalSportsMap: GeneralSportsMap,
      sportTimesMap: SportTimesMap,
      detail: {},
      loading: false
    }
  },
  created() {
    const { id } = this.$route.query
    this.queryDetail(id)
  },
  methods: {
    handleDeleteRecord(item) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO
      }).catch(() => {})
    },
    joinIllnessCase (data) {
      return data?.map(item => {
        if (item.firstLevel === '手术后恢复期' && item.secondLevel?.length) {
          return `手术时间：${moment(item?.secondLevel[0]).format('YYYY年MM月DD日')}`
        }
        return [item.firstLevel, item?.secondLevel?.join('；')].filter(v => v).join('；')
      }).filter(v => v).join('；')
    },
    joinAllergiesFoods(data) {
      return data?.map(item => item?.secondLevel?.filter(v => v).join('；')).filter(v => v).join('；')
    },
    getAge(birthday) {
      if (!birthday) return null;
      const age = moment().diff(birthday, 'year');
      if (age >= 1) return `${age}岁`;
      const month = moment().diff(birthday, 'month');
      if (month >= 1) return `${month}个月`;
      const day = moment().diff(birthday, 'day');
      return `${day}天`;
    },
    async queryDetail(id) {
      this.loading = true
      const { code, data } = await queryUserByList({ userId: id })
      if (code !== 200) return;
      this.loading = false
      this.detail = data
    }
  }
}
</script>

<style lang="stylus">
.el-descriptions__title {
  width 100%;
}
.order_detail_wrapper
  > .el-card + .el-card
    margin-top 1rem

  .el-form-item
    margin-bottom 0

    .el-form-item__content, .el-form-item__label
      line-height 2

.my-label
  width 100px

.my-content
  width 400px

.popperOptions[x-placement^=left] .popper__arrow::after {
  border-left-color: #565D6B;
}
.vertical {
  display flex;
  flex-direction column;
  gap: 10px
}
.popperOptions[x-placement^=right] .popper__arrow::after {
  border-right-color: #565D6B;
}

.popperOptions[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #565D6B;
}

.popperOptions[x-placement^=top] .popper__arrow::after {
  border-top-color: #565D6B;
}

.popperOptions {
  background-color: #565D6B;
  color: #FFFFFF;
  border: #565D6B;
}

.el-timeline-item__content {
  color: #fff;
}

.el-timeline-item__timestamp {
  color: #fff;
}
</style>
